<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-form
        ref="refresh_ref"
        :model="query_info"
        :rules="refresh_rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="用户昵称" prop="nick_name">
              <el-input
                placeholder="请输入用户昵称"
                maxlength="30"
                clearable
                show-word-limit
                v-model="query_info.nick_name"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收货人名称" prop="key">
              <el-input
                placeholder="请输入收货人名称"
                maxlength="30"
                clearable
                show-word-limit
                v-model="query_info.key"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收件人手机" prop="user_phone">
              <el-input
                placeholder="请输入收件人手机"
                maxlength="30"
                clearable
                show-word-limit
                v-model="query_info.user_phone"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单号" prop="user_phone">
              <el-input
                placeholder="请输入订单号"
                maxlength="100"
                clearable
                show-word-limit
                v-model="query_info.order_no"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="订单状态" prop="status">
              <el-select
                v-model="query_info.status"
                placeholder="请选择订单状态"
                clearable
                @clear="get_list()"
              >
                <el-option label="待付款" value="1"></el-option>
                <el-option label="待发货" value="2"></el-option>
                <el-option label="待收货" value="3"></el-option>
                <el-option label="待评价" value="4"></el-option>
                <el-option label="订单已取消" value="5"></el-option>
                <el-option label="申诉中" value="6"></el-option>
                <el-option label="申诉失败" value="7"></el-option>
                <el-option label="申诉完成" value="8"></el-option>
                <el-option label="已完成" value="9"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="付款时间" prop="pay_time">
              <el-date-picker
                v-model="query_info.pay_time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="发货时间" prop="delivery_time">
              <el-date-picker
                v-model="query_info.delivery_time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column
          align="center"
          label="编号"
          prop="id"
          width="80"
          fixed="left"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单详情"
          prop="order_info"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单状态"
          prop="status_name"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单总金额"
          prop="total_money"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="收货人名称"
          prop="user_name"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="收件人手机"
          prop="user_phone"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          label="收件人地址"
          prop="user_address"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          label="用户昵称"
          prop="user_to.nick_name"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单号"
          prop="order_no"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          label="付款时间"
          prop="pay_time"
          width="140"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="发货时间"
          prop="delivery_time"
          width="140"
          sortable
        ></el-table-column>
        <el-table-column align="center" label="操作" width="450" fixed="right">
          <template v-slot="scope">
            <el-button
              type="primary"
              :disabled="btnStatus.edit"
              icon="iconfont icon-bianji"
              size="mini"
              @click="edit(scope.row.id)"
              >编辑地址</el-button
            >
            <el-button
              type="success"
              v-if="scope.row.status === 2"
              :disabled="btnStatus.status"
              icon="iconfont icon-fahuo"
              size="mini"
              @click="status(scope.row.id)"
              >发货</el-button
            >
            <el-button
              type="info"
              :disabled="btnStatus.order_detail"
              icon="iconfont icon-xiangqing"
              size="mini"
              @click="order_detail(scope.row.id)"
              >订单详情</el-button
            >
            <el-button
              type="warning"
              :disabled="btnStatus.order_complain_list"
              icon="iconfont icon-icon-test"
              size="mini"
              @click="order_complain_list(scope.row.id)"
              >申诉记录({{ scope.row.order_complain_to_count }})</el-button
            >
            <el-button
              type="danger"
              v-if="scope.row.status !== 1 && scope.row.status !== 5"
              :disabled="btnStatus.order_refund_info"
              icon="iconfont icon-refund"
              size="mini"
              @click="order_refund_edit(scope.row.id)"
              >退款</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination
        @size-change="handle_size_change"
        @current-change="handle_current_change"
        :total="total"
        :layout="$config.layout"
        :current-page="query_info.page"
        :page-sizes="$config.page_sizes"
        :page-size="query_info.pagesize"
      ></el-pagination>
    </el-card>
    <!-- 退款对话框 -->
    <el-dialog
      title="退款"
      v-model="order_refund_visible"
      :width="$config.percentage_width"
      @close="order_refund_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="150px"
        :model="order_refund_form"
        :rules="order_refund_rules"
        ref="order_refund_ref"
      >
        <el-form-item label="订单号">
          <el-input disabled v-model="order_refund_form.order_no"></el-input>
        </el-form-item>
        <el-form-item label="支付平台流水号">
          <el-input
            disabled
            v-model="order_refund_form.serial_number"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单总金额">
          <el-input disabled v-model="order_refund_form.total_money"></el-input>
        </el-form-item>
        <el-form-item label="退款金额" prop="refund_money">
          <el-input
            placeholder="请输入退款金额"
            maxlength="10"
            clearable
            show-word-limit
            v-model="order_refund_form.refund_money"
            @input="refund_money_input"
          ></el-input>
        </el-form-item>
        <el-form-item label="退款备注" prop="refund_comment">
          <el-input
            placeholder="请输入退款备注"
            maxlength="12"
            clearable
            show-word-limit
            v-model="order_refund_form.refund_comment"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="order_refund_visible = false">取 消</el-button>
        <el-button
          :disabled="btnStatus.order_refund_info"
          type="primary"
          @click="order_refund_send()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑地址对话框 -->
    <el-dialog
      title="编辑地址"
      v-model="edit_dialog_visible"
      :width="$config.percentage_width"
      @close="edit_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="edit_form"
        :rules="rules"
        ref="edit_ref"
      >
        <el-form-item label="收货人名称" prop="user_name">
          <el-input
            placeholder="请输入收货人名称"
            maxlength="30"
            clearable
            show-word-limit
            v-model="edit_form.user_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="收件人手机" prop="user_phone">
          <el-input
            placeholder="请输入收件人手机"
            maxlength="11"
            clearable
            show-word-limit
            v-model="edit_form.user_phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址选择" prop="county_id">
          <el-cascader
            placeholder="请选择地址"
            v-model="value"
            :options="area_list"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
            @change="add_handle_change"
            clearable
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="收件人地址" prop="user_address">
          <el-input
            placeholder="请输入收件人地址"
            maxlength="50"
            clearable
            show-word-limit
            v-model="edit_form.user_address"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="edit_dialog_visible = false">取 消</el-button>
        <el-button
          :disabled="btnStatus.edit"
          type="primary"
          @click="edit_send()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="order_detail_visible"
      :width="$config.percentage_width"
      @close="order_detail_close"
    >
      <!-- 主体区 -->
      <el-form label-width="130px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="订单号">
              <el-input disabled :value="order_info.order_no"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单状态">
              <el-input disabled :value="order_info.status"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单总金额">
              <el-input disabled :value="order_info.total_money"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="总邮费">
              <el-input disabled :value="order_info.deliver_money"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品总数">
              <el-input disabled :value="order_info.total_num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人名称">
              <el-input disabled :value="order_info.user_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人手机">
              <el-input disabled :value="order_info.user_phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人地址">
              <el-input disabled :value="order_info.user_address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                disabled
                :value="order_info.comment"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          v-for="(item, index) in order_info.order_info_to"
          :key="index"
          style="border: 1px solid red;padding-top: 20px;"
        >
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item :label="'商品' + (index + 1)">
                <el-input disabled :value="item.product_to.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="规格">
                <el-input disabled :value="item.specs"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="数量">
                <el-input disabled :value="item.num"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="单价">
                <el-input disabled :value="item.money"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="单个邮费">
                <el-input disabled :value="item.postage"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="用户昵称">
              <el-input disabled :value="order_info.nick_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="支付平台流水号">
              <el-input disabled :value="order_info.serial_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建订单时间">
              <el-input disabled :value="order_info.created_at"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="付款时间">
              <el-input disabled :value="order_info.pay_time"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="评价时间">
              <el-input disabled :value="order_info.receive_time"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="发货时间">
              <el-input disabled :value="order_info.delivery_time"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnStatus: this.is_string(
        {
          order_refund_info: "shop/order/order_refund_info",
          edit_address: "shop/order/edit_address",
          status: "shop/order/status",
          order_detail: "shop/order/order_detail",
          order_complain_list: "shop/order/order_complain_list"
        },
        this
      ),
      order_info: {}, // 订单详情
      order_detail_visible: false, //
      order_refund_visible: false, //
      query_info: {
        nick_name: "", // 用户昵称
        key: "", // 收货人名称
        user_phone: "", // 收件人手机
        order_no: "", // 订单号
        status: "", // 状态
        pay_time: [], // 付款时间
        delivery_time: [], // 发货时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize // 每页显示条数
      },
      area_list: [], // 省市区数据
      value: [], // 省市区数据选择的数据
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: {
        nick_name: [],
        key: [],
        user_phone: [],
        order_no: [],
        status: [],
        pay_time: [],
        delivery_time: []
      },
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      edit_form: {
        id: "",
        user_name: "",
        user_address: "",
        user_phone: "",
        province_id: "",
        province_name: "",
        city_id: "",
        city_name: "",
        county_id: "",
        county_name: ""
      },
      rules: {
        user_name: [
          { required: true, message: "请输入收货人名称！", trigger: "blur" }
        ],
        user_phone: [
          { required: true, message: "请输入收件人手机！", trigger: "blur" }
        ],
        user_address: [
          { required: true, message: "请输入收件人地址！", trigger: "blur" }
        ],
        county_id: [
          { required: true, message: "请选择地址！", trigger: "blur" }
        ]
      },
      order_refund_form: {
        id: "",
        total_money: "", // 订单金额
        refund_money: "", // 退款金额
        order_no: "", // 订单号
        serial_number: "", // 支付平台流水号
        refund_comment: "" // 退款备注
      },
      order_refund_rules: {
        refund_comment: [
          { required: true, message: "请输入退款备注！", trigger: "blur" }
        ],
        refund_money: [
          { required: true, message: "请输入退款金额！", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    // 获取列表
    get_list() {
      this.$base.request(
        {
          that: this,
          url: "shop/order/index",
          data: this.query_info
        },
        res => {
          if (res.code === 8888) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    // 刷新
    refresh() {
      this.$refs.refresh_ref.resetFields();
      this.get_list();
    },
    // 当前每页多少条选择
    handle_size_change(pagesize) {
      this.query_info.pagesize = pagesize;
      this.get_list();
    },
    // 当前页码
    handle_current_change(page) {
      this.query_info.page = page;
      this.get_list();
    },
    // 监听退款金额
    refund_money_input() {
      if (
        parseFloat(this.order_refund_form.refund_money) >
        parseFloat(this.order_refund_form.total_money)
      ) {
        this.order_refund_form.refund_money = this.order_refund_form.total_money;
      }
    },
    // 监听退款对话框的关闭事件
    order_refund_close() {
      this.$refs.order_refund_ref.resetFields();
    },
    // 打开退款按钮对话框
    order_refund_edit(id) {
      this.$base.request(
        {
          that: this,
          url: "shop/order/order_refund_info",
          data: { id: id }
        },
        res => {
          if (res.code === 8888) {
            this.order_refund_visible = true;
            this.order_refund_form = res.data;
          }
        }
      );
    },
    // 提交退款数据
    order_refund_send() {
      this.$refs.order_refund_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "shop/order/order_refund",
              data: {
                id: this.order_refund_form.id,
                refund_comment: this.order_refund_form.refund_comment,
                refund_money: this.order_refund_form.refund_money
              }
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.order_refund_visible = false;
                var that = this;
                setTimeout(function() {
                  that.get_list();
                }, 6000);
              }
            }
          );
        }
      });
    },
    // 订单详情
    order_detail(id) {
      this.$base.request(
        {
          that: this,
          url: "shop/order/order_detail",
          data: { id: id }
        },
        res => {
          if (res.code === 8888) {
            this.order_detail_visible = true;
            this.order_info = res.data;
          }
        }
      );
    },
    // 监听订单详情对话框的关闭事件
    order_detail_close() {
      this.order_info = {};
    },
    // 打开编辑地址按钮对话框
    edit(id) {
      this.$base.request(
        {
          that: this,
          url: "shop/order/edit_address",
          data: { id: id }
        },
        res => {
          if (res.code === 8888) {
            this.edit_dialog_visible = true;
            this.edit_form = res.data.info;
            this.area_list = res.data.area_list;
            this.value = [
              res.data.info.province_id,
              res.data.info.city_id,
              res.data.info.county_id
            ];
          }
        }
      );
    },
    // 提交编辑地址数据
    edit_send() {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "shop/order/edit_update",
              data: this.edit_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.edit_dialog_visible = false;
                this.get_list();
              }
            }
          );
        }
      });
    },
    // 监听编辑地址对话框的关闭事件
    edit_dialog_close() {
      this.$refs.edit_ref.resetFields();
    },
    // 监听编辑获取选择器值
    add_handle_change() {
      if (this.value.length > 0) {
        this.edit_form.province_id = this.value[0];
        this.edit_form.city_id = this.value[1];
        this.edit_form.county_id = this.value[2];
        for (var i = 0; i < this.area_list.length; i++) {
          if (this.value[0] === this.area_list[i].id) {
            this.edit_form.province_name = this.area_list[i].name;
            for (var j = 0; j < this.area_list[i].children.length; j++) {
              if (this.value[1] === this.area_list[i].children[j].id) {
                this.edit_form.city_name = this.area_list[i].children[j].name;
                for (
                  var x = 0;
                  x < this.area_list[i].children[j].children.length;
                  x++
                ) {
                  if (
                    this.value[2] ===
                    this.area_list[i].children[j].children[x].id
                  ) {
                    this.edit_form.county_name = this.area_list[i].children[
                      j
                    ].children[x].name;
                    this.edit_form.user_address =
                      this.edit_form.province_name +
                      this.edit_form.city_name +
                      this.edit_form.county_name;
                    return;
                  }
                }
              }
            }
          }
        }
      } else {
        this.edit_form.province_id = "";
        this.edit_form.city_id = "";
        this.edit_form.county_id = "";
        this.edit_form.province_name = "";
        this.edit_form.city_name = "";
        this.edit_form.county_name = "";
        this.edit_form.user_address = "";
      }
    },
    // 发货
    status(id) {
      this.$base.confirm({ that: this, content: "确定已发货吗？" }, () => {
        this.$base.request(
          {
            that: this,
            method: "PUT",
            url: "shop/order/status",
            data: { id: id }
          },
          res => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg });
              this.get_list();
            }
          }
        );
      });
    },
    // 申诉记录
    order_complain_list(id) {
      this.$router.push({
        path: "/shop/order/order_complain",
        query: { id: id }
      });
    }
  }
};
</script>
